import { Form, Input, Select, InputNumber, Button, Modal, Table, Popconfirm, } from 'antd';
import { connect } from 'net';
import moment from 'moment';

const Search = Input.Search;
const FormItem = Form.Item;
const { TextArea } = Input;
const Option = Select.Option;

@Form.create()
export default class CaipanForm extends React.Component {
  state = {tabKey:'new1', count:3};

  okHandle = () => {
    const { form, handleAdd, handleBatchAdd } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        handleAdd(fieldsValue);
        form.resetFields();
      });
  };

  getTitle = () => {
    return '裁判管理';
  };

  close = () => {
    const { form, handleModalVisible } = this.props;
    form.resetFields();
    handleModalVisible();
  };

  disabledDate = (current) => {
    // Can not select days before today and today
    return current && current < moment().endOf('day');
  }

  render() {
    const { modalVisible, form, caiapnList, curCaipan, curData } = this.props;
    return (
      <Modal
        title={this.getTitle()}
        width={1000}
        visible={modalVisible}
        onOk={this.okHandle}
        onCancel={() => this.close()}
        okText="保存"
        cancelText="关闭"
        maskClosable={false}
      >
        <div style={{ marginBottom: 30 }}>
          <Table
            dataSource={caiapnList ? caiapnList : []}
            pagination={false}
            size="small"
            columns={[
              {
                title: '名称',
                width: 150,
                dataIndex: 'nickName',
              },
              {
                title: '电话',
                dataIndex: 'tel',
                width: 200,
              },
              {
                title: '角色',
                dataIndex: 'caipanRole',
              },
              {
                title: '操作',
                width: 180,
                render: (value, item) => (
                  <div>
                    <Popconfirm
                      title="是否确定删除此裁判"
                      onConfirm={() => this.props.deleteMethod(item)}
                    >
                      <Button>删除</Button>
                    </Popconfirm>
                  </div>
                ),
              },
            ]}
          />
        </div>
        <div>
          <div style={{ marginLeft: 150, marginBottom: 30, marginRight:150 }}>
            <Search
              placeholder="请输入注册手机号查询"
              onSearch={value => {
                const {form} = this.props
                form.resetFields();
                this.props.selectByTel(value)}}
              enterButton
            />
          </div>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="用户编号">
            {form.getFieldDecorator('code', {
              rules: [{ required: true, message: '请先输入电话号码搜索到用户后添加' }],
              initialValue: curData && curData.code,
            })(<Input readOnly style={{ width: '100%' }} />)}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="电话号码">
            {form.getFieldDecorator('tel', {
              initialValue: curData && curData.tel,
            })(<Input readOnly />)}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="裁判角色">
            {form.getFieldDecorator('caipanRole', {
              rules: [{ required: true, message: '请选择裁判类型' }],
              initialValue: curData && curData.caipanRole,
            })(<Select style={{width:'100%'}}>
              <Option value='referee'>裁判长</Option>
              <Option value='dreferee'>副裁判长</Option>
              <Option value='bianpai'>编排员</Option>
              <Option value='umpire'>临场裁判</Option>
            </Select>)}
          </FormItem>
        </div>
        
      </Modal>
    );
  }
}
